<template>
<div class="box">
  <div class="header head-font">客流统计</div>

  <ul class="content-box">
    <li>
      <h3 class="title tit-font">近一周游客接待数分析</h3>
      <div class="chart-box" id="myChart1"></div>
    </li>
    <li>
      <h3 class="title tit-font">未来7日游客预测</h3>
      <div class="chart-box" id="myChart2"></div>
    </li>
  </ul>
</div>
</template>

<script>
export default {
  name: 'History',
  data () {
    return {
      data1: [457, 574, 398, 264, 598, 368, 546]
    }
  },
  mounted () {
    this.drawLine1()
    this.drawLine2()
  },
  methods: {
    drawLine1 () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('myChart1'))
      // 绘制图表
      var option = {
        grid: {
          top: '8%',
          left: '4%',
          right: '4%',
          bottom: '8%'// 也可设置left和right设置距离来控制图表的大小
        },
        xAxis: {
          data: ['01/19', '01/20', '01/21', '01/22', '01/23', '01/24', '01/25'],
          axisLine: {
            show: true, // 隐藏X轴轴线
            lineStyle: {
              color: 'rgba(202,202,204,0.5)'
            }
          },
          axisTick: {
            show: true // 隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#999' // X轴文字颜色
            }
          }

        },
        yAxis: [{
          show: false,
          type: 'value',
          name: '亿元',
          nameTextStyle: {
            color: '#ebf8ac'
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: true
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#FFFFFF'
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ebf8ac'
            }
          }
        },
        {
          show: false,
          type: 'value',
          name: '同比',
          nameTextStyle: {
            color: '#ebf8ac'
          },
          position: 'right',
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            formatter: '{value} %', // 右侧Y轴文字显示
            textStyle: {
              color: '#ebf8ac'
            }
          }
        },
        {
          type: 'value',
          gridIndex: 0,
          min: 50,
          max: 100,
          splitNumber: 8,
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)']
            }
          }
        }
        ],
        series: [{
          name: '游客接待数量',
          type: 'line',
          yAxisIndex: 1, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
          smooth: true, // 平滑曲线显示
          showAllSymbol: true, // 显示所有图形。
          symbol: 'circle', // 标记的图形为实心圆
          symbolSize: 8, // 标记的大小
          itemStyle: {
            // 折线拐点标志的样式
            color: '#3CAA59'
          },
          lineStyle: {
            color: '#3CAA59'
          },
          data: this.data1
        }, {
          name: '游客接待数量',
          type: 'bar',
          barWidth: 15,
          itemStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(60,170,89,0.6)'
              },
              {
                offset: 1,
                color: 'rgba(60,170,89,0)'
              }
              ])
            }
          },
          label: {
            show: true,
            position: 'top',
            textStyle: {
              color: '#3CAA59',
              fontFamily: 'DIN-Medium'
            }
          },
          data: this.data1
        }
        ]
      }
      myChart.setOption(option)
    },
    drawLine2 () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('myChart2'))
      // 绘制图表
      var option = {
        grid: {
          top: '8%',
          left: '4%',
          right: '4%',
          bottom: '8%'// 也可设置left和right设置距离来控制图表的大小
        },
        xAxis: {
          data: ['01/19', '01/20', '01/21', '01/22', '01/23', '01/24', '01/25'],
          axisLine: {
            show: true, // 隐藏X轴轴线
            lineStyle: {
              color: 'rgba(202,202,204,0.5)'
            }
          },
          axisTick: {
            show: true // 隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#999' // X轴文字颜色
            }
          }

        },
        yAxis: [{
          show: false,
          type: 'value',
          name: '亿元',
          nameTextStyle: {
            color: '#ebf8ac'
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: true
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#FFFFFF'
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ebf8ac'
            }
          }
        },
        {
          show: false,
          type: 'value',
          name: '同比',
          nameTextStyle: {
            color: '#ebf8ac'
          },
          position: 'right',
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            formatter: '{value} %', // 右侧Y轴文字显示
            textStyle: {
              color: '#ebf8ac'
            }
          }
        },
        {
          type: 'value',
          gridIndex: 0,
          min: 50,
          max: 100,
          splitNumber: 8,
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)']
            }
          }
        }
        ],
        series: [{
          name: '游客接待数量',
          type: 'line',
          yAxisIndex: 1, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
          smooth: true, // 平滑曲线显示
          showAllSymbol: true, // 显示所有图形。
          symbol: 'circle', // 标记的图形为实心圆
          symbolSize: 8, // 标记的大小
          itemStyle: {
            // 折线拐点标志的样式
            color: '#EF7956'
          },
          lineStyle: {
            color: '#EF7956'
          },
          data: this.data1
        }, {
          name: '游客接待数量',
          type: 'bar',
          barWidth: 15,
          itemStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(239,121,86,0.6)'
              },
              {
                offset: 1,
                color: 'rgba(239,121,86,0)'
              }
              ])
            }
          },
          label: {
            show: true,
            position: 'top',
            textStyle: {
              color: '#EF7956',
              fontFamily: 'DIN-Medium'
            }
          },
          data: this.data1
        }
        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped>
.content-box{
  margin-top: 50/7.5vw;
  li{
    background-color: #fff;
    border-radius: 4/7.5vw;
    padding:40/7.5vw 0;
    margin-bottom: 30/7.5vw;
    .title{
      padding:0 30/7.5vw;
      margin-bottom:80/7.5vw;
    }
    .chart-box{
      height: 500/7.5vw;
    }
  }
}
</style>
